<template>
  <section id='primary' class='wide content-area'>
    <main id='main' class='site-main grid' role='main'>
      <header class="page-header">
        <h1 class="post-title uppercase fade-before fade-after">{{ categoryName }}</h1>
        <div class='taxonomy-des fade-before fade-after'>
          <p>{{ description }}</p>
        </div>
        <div class='taxonomy-nav fade-before fade-after'>
          <ul class='taxonomy-sub no-scrollbar'>
            <template v-for='item in categoryList'>
              <li :class='"cat-item cat-item-"+item.id'>
                <a @click='handleTabChange(item.id)'>{{ item.categoryName }}</a>
              </li>
            </template>
          </ul>
        </div>
      </header>
      <div class='post_box word word'>
        <CustomPostCard :articles-list='articlesList'/>
      </div>
      <nav class='navigation page-navigation'>
        <Paginator
          :pageSize="pagination.size"
          :pageTotal="pagination.total"
          :page="pagination.current"
          @pageChange="pageChangeHanlder" />
      </nav>
    </main>
  </section>
</template>

<script lang='ts'>
import { defineComponent, onBeforeMount, reactive, ref, toRefs } from 'vue'
import { useUserStore } from '@/stores/user'
import api from '@/api/api'
import CustomPostCard from '@/components/kit/CustomPostCard/index.vue'
import Paginator from '@/components/Paginator.vue'

export default defineComponent({
  name: 'index',
  props:['categoryName','description','categoryList'],
  components:{ Paginator, CustomPostCard},
  setup(){
    let nowCategoryId = 0
    const pagination = reactive({
      size: 6,
      total: 0,
      current: 1
    })
    const userStore = useUserStore()
    const activeTab = ref(0)
    onBeforeMount(()=>{
      fetchArticles()
    })
    const handleTabChange = (categoryId: any) => {
      userStore.tab = categoryId
      userStore.page = 1
      pagination.current = 1
      activeTab.value = categoryId
      nowCategoryId = categoryId
      if (categoryId === 0) {
        fetchArticles()
      } else {
        fetchArticlesByCategoryId(categoryId)
      }
    }
    const reactiveData = reactive({
      articlesList: [] as any
    })
    const fetchArticlesByCategoryId = (categoryId: any) => {
      api.getArticlesByCategoryId({
          current: pagination.current,
          size: pagination.size,
          categoryId: categoryId
        })
        .then(({ data }) => {
          reactiveData.articlesList=data.data.records
          pagination.total = data.data.count
        })
    }
    const fetchArticles = () => {
      api.getArticles({
        current: pagination.current,
        size: pagination.size
      }).then(({ data }) => {
        reactiveData.articlesList=data.data.records
        pagination.total = data.data.count
      })
    }
    const pageChangeHanlder = (current: number) => {
      userStore.page = current
      pagination.current = current
      if (nowCategoryId === 0) {
        fetchArticles()
      } else {
        fetchArticlesByCategoryId(nowCategoryId)
      }
    }
    return{
      ...toRefs(reactiveData),
      handleTabChange,
      pagination,
      pageChangeHanlder,
    }
  }
})
</script>

<style scoped>
.taxonomy-sub {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow: auto hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin: calc(var(--gap-divs)*-1);
    padding: var(--gap-divs);
    gap: var(--gap-span);
    -webkit-mask: linear-gradient(90deg, #00000000, #000) no-repeat 0 0 / calc(var(--gap-divs)*1) 100%, linear-gradient(90deg, #000, #000) no-repeat center / calc(100% - var(--gap-divs)*2) 100%, linear-gradient(90deg, #000, #00000000) no-repeat 100% center / calc(var(--gap-divs)*1) 100%;
}
.taxonomy-sub li {
    position: relative;
    flex: none;
}
.post_box {
    display: grid;
    grid: auto-flow minmax(var(--card-size), max-content) / repeat(auto-fill, minmax(min(var(--card-size), 100%), 1fr));
    align-content: center;
    gap: var(--gap-divs);
}
.page-navigation {
    display: flex;
    justify-content: center;
    gap: var(--gap-divs);
}
@media (min-width: 1153px){
    .wide .taxonomy-sub {
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
        -webkit-mask: none;
    }
    .wide .taxonomy-sub li::before {
        content: "";
        width: 6px;
        height: 150%;
        background: linear-gradient(180deg,#0000,rgb(var(--color-rgb) / 20%),#0000) no-repeat center / 2px 100%, radial-gradient(circle,rgb(var(--color-rgb) / 70%) 50%,#0000 50%) no-repeat center / 6px 6px;
        position: absolute;
        inset: 0 auto 0 calc(-1.5rem + 3px);
        margin: auto;
        transition: .5s;
    }
    .wide .taxonomy-sub li:nth-child(1)::before, .wide .taxonomy-sub li:hover::before {
        background-size: 2px 0, 12px 6px;
    }
    .wide .post_box {
        grid-area: 1 / 2 / 2 / 3;
    }
    .wide .page-navigation {
        grid-area: 1 / 1 / 2 / 2;
        position: sticky;
        bottom: var(--gap-divs);
        place-self: end start;
        animation: var(--animation-ot);
        animation-delay: 1s;
    }
}
</style>
